<template>
  <h1>{{ obj }}</h1>
  <button @click="obj.age++">张三变</button>
  <button @click="obj.cp.age++">张三的CP变~</button>
</template>

<script>
// 监听 reactive 响应式对象：
//  注意点：
//    1. 没有分新旧值，都是同一个内存地址
//    2. 默认深度监听到自身属性和子对象的属性
import { reactive, watch } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: '张三',
      age: 18,
      cp: {
        name: '李四',
        age: 17,
      },
    })

    // 监听 reactive 响应式对象
    watch(obj, newVal => {
      console.log('obj发生了变化', newVal)
    })

    return { obj }
  },
}
</script>

<style></style>
